<template>
	<gui-page :fullPage="true" :isLoading="false" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns bgfff">
			<!-- 分类导航 -->
			<view class="headerTap gui-bg-white gui-border-b gui-border-box" style="border-width: 8rpx;"
				id="myheader">
				<view class="search flex-ac-jc">
					<gui-search @inputting="inputting" @confirm="handleSearch" @clear="handleClear" placeholder="输入关键字，搜索您想要的" placeholder-class="plStyle" borderRadius="15rpx" iconColor="#FF7272" class="flex1"></gui-search>
				</view>
				<view class="tabs">
					<gui-switch-navigation3 :width="670" :size="140" :currentIndex="currentIndex" fontSize="24rpx" activeFontSize="24rpx"
						activeLineBg="linear-gradient(to right, #FF5151,#FF5151)" activeColor="#fff" :margin="36"
						activeLineWidth="56rpx" activeDirection="center" textAlign="center"
						activeLineRadius="10rpx" :items="tabs" @change="navchange"></gui-switch-navigation3>
				</view>
				<view class="sort flex-ac-jb">
					<view class="item flex-ac" @tap="sortParams('teamSort')">
						<text :class="{'primary-color':query.teamSort=='asc'||query.teamSort=='desc'}">团队排序</text>
						<view class="item-icon flex-dc-ac f32">
							<text class="gui-icons top-icon" :class="{'primary-color':query.teamSort=='asc'}">&#xe647;</text>
							<text class="gui-icons bottom-icon" :class="{'primary-color':query.teamSort=='desc'}">&#xe661;</text>
						</view>
					</view>
					<view class="item flex-ac" @tap="sortParams('monySort')">
						<text :class="{'primary-color':query.monySort=='asc'||query.monySort=='desc'}">金额排序</text>
						<view class="item-icon flex-dc-ac f32">
							<text class="gui-icons top-icon" :class="{'primary-color':query.monySort=='asc'}">&#xe647;</text>
							<text class="gui-icons bottom-icon" :class="{'primary-color':query.monySort=='desc'}">&#xe661;</text>
						</view>
					</view>
					<view class="item flex-ac" @tap="sortParams('orderSort')">
						<text :class="{'primary-color':query.orderSort=='asc'||query.orderSort=='desc'}">订单排序</text>
						<view class="item-icon flex-dc-ac f32">
							<text class="gui-icons top-icon" :class="{'primary-color':query.orderSort=='asc'}">&#xe647;</text>
							<text class="gui-icons bottom-icon" :class="{'primary-color':query.orderSort=='desc'}">&#xe661;</text>
						</view>
					</view>
				</view>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{height:mainHeight+'px', width:'750rpx'}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :scroll-top="scrollTops[currentIndex]"
						:style="{height:mainHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove"
						@touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="noData[currentIndex]&&currentIndex==orderIndex">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" src="../../static/noImg.png" mode="widthFix"></image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
								style="color:#9DABFF;">暂无数据...</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="list">
							<view class="item flex-ac-jb" v-for="(item,index) in items" :key="item.id">
							  <view class="headImg">
							  	<gui-imageLoading width="88" height="88" borderRadius="50%" :src="item.headPortrait" mode="aspectFill" :showOpacity="true"></gui-imageLoading>
							  </view>
							   <view class="info flex1 flex-dc">
							   	 <view>{{item.username}} <text class="f24">（ID:{{item.invitationCode}}）</text>  </view>
								 <text class="f22 c999">{{item.createTime}}</text>
							   </view>
							   <view class="num flex-dc-ae">
							   	<text> <text class="primary-color">{{item.fansCount}}</text> 人</text>
								<text>{{item.orderCount}}单</text>
								<text>{{item.money}}元</text>
							   </view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gui-page>
</template>
<script>
	var graceJs = require('@/GraceUI5/js/grace.js');
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				pageLoading: true,
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				// 核心区域高度 
				mainHeight: 200,
				// 订单信息保存数组
				orders: [],
				// 每个选项卡对应的分页
				pages: [],
				pageSize: 10,
				totalPage: 0,
				// 每个选项卡内部的滚动区域滚动值
				scrollTops: [],
				// 滚动延迟
				scrollTimer: null,
				// 加载更多延迟
				loadMoreTimer: null,
				// api 加载状态记录
				apiLoadStatus: [],
				noData: [],
				searchKey:'',
				query:{
					teamSort:'',
					monySort:'',
					orderSort:'',
					keyVal:'', //排序字段 1.团队 2.金额 3.订单
					isAsc:'' //asc升序 desc降序
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad: function(options) {
			// 01. 获取页面主体高度
			graceJs.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 主体高度 = 页面高度 - 自定义区域高度
					graceJs.select('#myheader', (e2) => {
						// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
						this.mainHeight = e.height - e2.height - uni.upx2px(62);
						// 模拟 api 加载新闻分类
						// 实际开发时此处改成 api 请求即可
						//订单状态 -1已取消 0待支付 1待接单 2已接单 3已出发 4已完成待评价 5已完成 6待处理
						this.tabs = [{
								value: '',
								name: '全部粉丝'
							}, {
								value: '1',
								name: '一级粉丝'
							},
							{
								value: '2',
								name: '二级粉丝'
							},
							{
								value: '2',
								name: '三级粉丝'
							}
						];
						// 初始化新闻列表数组 元素数量与分类匹配
						for (var i = 0; i < this.tabs.length; i++) {
							this.orders.push([]);
							this.pages.push(1);
							this.scrollTops.push(0);
							this.apiLoadStatus.push(false);
							this.noData.push(false);
						}
						// 第一次加载数据
						this.getOrders();
					});
				});
			});
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.orders[nVal] == null) {
					return;
				}
				if (this.orders[nVal].length < 1) {
					this.getOrders();
				}
			}
		},
		methods: {
			handleSearch(){
				this.clearOrderSattus()
			},
			handleClear(){
				this.searchKey =''
				this.clearOrderSattus()
			},
			inputting(e){
				this.searchKey = e
				if(!e){
					this.clearOrderSattus()
				}
			},
			sortParams(key){ //排序
				if(!this.query[key]){
					this.query[key] = 'asc'
					
				}else if(this.query[key]=='asc'){
					this.query[key] = 'desc'
				}else if(this.query[key]=='desc'){
					this.query[key]=''
				}
				this.query.isAsc = this.query[key]
				if(key=='teamSort'){
					this.query.monySort=''
					this.query.orderSort=''
					this.query.keyVal = 1
				}
				if(key=='monySort'){
					this.query.teamSort=''
					this.query.orderSort=''
					this.query.keyVal = 2
				}
				if(key=='orderSort'){
					this.query.teamSort=''
					this.query.monySort=''
					this.query.keyVal = 3
				}
				this.clearOrderSattus()
			},
			clearOrderSattus() { //统一处理订单操作后的情况,原理其余订单重新请求，当前订单删除并且为了全部订单的时候需要重新查询选项卡为0时
				this.pages[this.currentIndex] = 1;
				this.orders[this.currentIndex] = [];
				this.getOrders()
				for (var i = 0; i < this.tabs.length; i++) {
					if (i != 0) {
						this.pages[i] = 1;
						this.orders[i] = [];
					}
				}
			},
			// 分类切换
			navchange: function(e) {
				this.currentIndex = e;
			},
			// 轮播切换
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			// 滚动区域滚动
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
				}, 100);
			},
			// 下拉刷新相关事件绑定
			touchstart: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchstart(e);
			},
			touchmove: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchmove(e);
			},
			touchend: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchend(e);
			},
			// 刷新事件
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.getOrders(1);
			},
			// 加载更多事件
			loadmorefun: function() {
				var currentIndex = this.currentIndex;
				if (this.apiLoadStatus[currentIndex]) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom[currentIndex].loading();
					// 此处开启加载动画执行加载数据的函数
					this.getOrders();
				}, 80);
			},
			// 新闻数据读取
			getOrders: function(isReload) {
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				var currentIndex = this.currentIndex;
				console.log(this.pages[currentIndex]);
				// 更新 api 加载状态
				this.apiLoadStatus.splice(currentIndex, 1, true);
				if (this.pages[currentIndex] == 1 && !isReload) {
					this.pageLoading = true;
				}
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 value 应该为 this.tabs[this.currentIndex].value
				let type = this.tabs[currentIndex] ? this.tabs[currentIndex].value : ''
				let order = this.query.keyVal
				let isAsc = this.query.isAsc
				this.$http.get('/api/distribution/fansList', {
					type,
					order,
					isAsc,
					search:this.searchKey,
					pageNum: this.pages[currentIndex],
					pageSize: this.pageSize
				}).then(res => {
					let result = res.data
					console.log('订单列表', result)
					this.totalPage = Math.ceil(res.total / this.pageSize);
					// 第一页
					if (this.pages[currentIndex] == 1) {
						this.orders.splice(currentIndex, 1, result);
						this.noData[currentIndex] = result.length ? false : true
					}
					// 之后的加载页
					else {
						this.$refs.loadmorecom[currentIndex].stoploadmore();
						console.log(this.pages[currentIndex] >= this.totalPage);
						if (this.pages[currentIndex] > this.totalPage) {
							this.$refs.loadmorecom[currentIndex].nomore();
						} else {
							this.orders[currentIndex] = this.orders[currentIndex].concat(result);
						}
					}
					if (isReload) {
						this.$refs.refreshcom[currentIndex].endReload();
					}
					this.pages[currentIndex]++;
					// 更新 api 加载状态
					this.apiLoadStatus.splice(currentIndex, 1, false);
					this.pageLoading = false;
					console.log(this.orders);

				})
			},
		}
	}
</script>
<style lang="less">
	.headerTap {
		.search {
			background: linear-gradient(180deg, #FF7272 0%, #FF0019 100%);
			height: 100rpx;
			padding: 0 34rpx;
		}
		.tabs{
			padding: 20rpx 40rpx 10rpx 40rpx;
		}
		.sort{
			padding: 0 66rpx 20rpx 66rpx;
			.item-icon{
				.top-icon{
					position: relative;
					top: 12rpx;
				}
				.bottom-icon{
					position: relative;
					bottom: 6rpx;
				}
			}
		}
	}

	.list{
		padding: 0 46rpx 0 48rpx;
		.item{
			padding: 27rpx 0 26rpx 0;
			border-bottom: 1px solid #f3f3f3;
			.headImg{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
			.info{
				margin: 0 30rpx;
				.f22{
					margin-top: 10rpx;
				}
			}
			
		}
	}
</style>